<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝首页</title>
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>

    <!-- <div class="aaa"></div> -->
    <!-- 引入浮动框架集  frameborder : 框架集边框 -->
    <!-- <iframe class="headerF" src="./header.html" style="width:100%;height:200px" name="iframe_a" border="0" marginwidth="0"
        marginheight="0" scrolling="no" allowtransparency="yes" frameborder="0"></iframe> -->

    <header>
        <div class="nav">
            <div class="navBox">
                <ul class="loginBox">
                    <li class="active ind">亲,请登录</li>
                    <li><a href="./register.html">免费注册</a></li>
                    <li>手机逛淘宝</li>
                </ul>
                <div class="loginShadow">
                    <div class="zhezhao"></div>
                    <p class="shadowImag"><span class="outLogin">退出</span><span>用户信息</span></p>
                    <div class="shadowImg"><img src="../images/index/userHead.jpg" alt=""></div>
                    <span class="shadowNick">用户昵称</span>
                    <p class="shadowState">查看你的专属权益</p>
                </div>
                <ul class="navMenu">
                    <li class="active"><a href="./list.html">淘宝热卖</a></li>
                    <li>我的淘宝</li>
                    <li><a href="./cart.html">购物车</a></li>
                    <li>收藏夹</li>
                    <li>商品分类</li>
                    <li>卖家中心</li>
                    <li>联系客服</li>
                    <li>网址导航</li>
                </ul>
            </div>
        </div>
    </header>

    <!-- 这个是楼层导航 -->
    <ul class="buildNav">
        <li class="active one">猜你<br>喜欢</li>
        <li>品质<br>好货</li>
        <li>暴恐<br>举报</li>
        <li>用户<br>反馈</li>
        <li class="five">置顶</li>
    </ul>
    <!-- 这个是下拉显示的导航 -->
    <nav>
        <div class="navBox">
            <img src="../images/index/logo.png" alt="">
            <div class="search">
                <select>
                    <option value="bb">宝贝</option>
                    <option value="tm">天猫</option>
                    <option value="dp">店铺</option>
                </select>
                <input type="text">
                <button>搜索</button>
            </div>
        </div>
    </nav>

    <div class="searchBox">
        <div class="logo"><img src="../images/index/logo.png" alt=""></div>
        <div class="search">
            <div class="top">
                <select>
                    <option value="bb">宝贝</option>
                    <option value="tm">天猫</option>
                    <option value="dp">店铺</option>
                </select>
                <input type="text">
                <button>搜索</button>
                <ul class="searchBox1"></ul>
                <p><span>这是渲染</span></p>
            </div>
            <div class="bot"></div>
        </div>
        <div class="ewm">
            <p>去领红包</p>
            <img src="../images/index/二维码.jpg" alt="">
        </div>
    </div>

    <section>
        <div class="bannerBox">
            <div class="top">
                <span>主题市场</span>
                <ul class="title">
                    <li>天猫</li>
                    <li>聚划算</li>
                    <li class="gre">天猫超市</li>
                </ul>
                <ul>
                    <li>司法拍卖</li>
                    <li>飞猪旅行</li>
                    <li>天天特卖</li>
                </ul>
                <ul>
                    <li>淘小铺</li>
                    <li>遭电信或</li>
                    <li>苏宁易购</li>
                </ul>
            </div>

            <div class="bot">
                <div class="lef">
                    <ul>
                        <li>女装 / 内衣 / 家居</li>
                        <li>女鞋 / 男鞋 / 箱包</li>
                        <li>母婴 / 童装 / 玩具</li>
                        <li>男装 / 运动户外</li>
                        <li>美妆 / 彩妆 / 个护</li>
                        <li>手机 / 数码 / 企业</li>
                        <li>大家电 / 生活电器</li>
                        <li>零食 / 生鲜 / 茶酒</li>
                        <li>厨具 / 收纳 / 清洁</li>
                        <li>家纺 / 家饰 / 鲜花</li>
                        <li>图书音像 / 进口</li>
                        <li>汽车 / 二手车 / 用品</li>
                        <li>房产 / 装修家居 / 建材</li>
                        <li>手表 / 眼镜 / 珠宝饰品</li>
                        <li>医药保健 / 进口</li>
                    </ul>
                    <div class="listDis">
                        <h4>女装</h4>
                        <p><span>这是标题</span></p>
                        <h4>流行趋势</h4>
                        <p></p>
                        <h4>生活用品</h4>
                        <p></p>
                    </div>
                </div>
                <div class="cen">
                    <div class="top1">
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide"><img src="../images/index/banner1.png" alt=""></div>
                                <div class="swiper-slide"><img src="../images/index/banner2.jpeg" alt=""></div>
                                <div class="swiper-slide"><img src="../images/index/banner3.jpeg" alt=""></div>
                                <div class="swiper-slide"><img src="../images/index/banner4.jpeg" alt=""></div>
                            </div>
                            <!-- 如果需要分页器 -->
                            <div class="swiper-pagination"></div>

                            <!-- 如果需要导航按钮 -->
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>

                            <!-- 如果需要滚动条 -->
                            <!-- <div class="swiper-scrollbar"></div> -->
                        </div>
                        <div class="ggTop"><img src="../images/index/bannerRig.webp" alt=""></div>
                    </div>
                    <div class="cen1">
                        <div class="cenBox"><img src="../images/index/tianmao.png" alt="">
                            <span>理想生活上天猫</span>
                        </div>
                    </div>
                    <div class="bot1">
                        <div class="ggBox">
                            <div>
                                <img src="../images/index/bannerSmall1.jpg" alt="">
                            </div>
                            <div>
                                <img src="../images/index/bannerSmall2.jpg" alt="">
                            </div>
                        </div>
                        <div class="ggSmall">
                            <img src="../images/index/bannerLif.jpeg" alt="">
                        </div>
                    </div>
                </div>

                <div class="rig">
                    <div class="sp1">
                        <div class="userHead">
                            <img src="../images/index/userHead.jpg" alt="">
                        </div>
                        <p class="nickName">张先生</p>
                        <div class="mass">
                            <a href=""><b>2</b><br>待收货</a>
                            <a href=""><b>4</b><br>待发货</a>
                            <a href=""><b>0</b><br>待付款</a>
                            <a href=""><b>6</b><br>待评价</a>
                        </div>
                    </div>
                    <div class="sp2">
                        <img src="../images/index/adver.jpeg" alt="">
                        <ul>
                            <li class="active">公告</li>
                            <li>规则</li>
                            <li>安全</li>
                            <li>公益</li>
                            <li>千牛</li>
                        </ul>
                        <p>关于加强最近电商平台的管理</p>
                        <div class="lifeBox">
                            <img src="../images/index/充话费.png" alt="">
                            <img src="../images/index/旅行.png" alt="">
                            <img src="../images/index/车险.png" alt="">
                            <img src="../images/index/游戏.png" alt="">
                            <img src="../images/index/彩票.png" alt="">
                            <img src="../images/index/电影.png" alt="">
                            <img src="../images/index/游戏.png" alt="">
                            <img src="../images/index/理财.png" alt="">
                        </div>
                        <p>阿里APP</p>
                        <div class="alApp">
                            <img src="../images/index/tmApp.png" alt="">
                            <img src="../images/index/txpApp.png" alt="">
                            <img src="../images/index/zfbApp.png" alt="">
                            <img src="../images/index/alApp.jpg" alt="">
                            <img src="../images/index/ddApp.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="list">
            <h2>猜你喜欢</h2>
            <div class="render">
                <!-- 在这里面渲染商品列表 -->
            </div>
        </div>
    </section>

    <!-- 引入浮动框架集  frameborder : 框架集边框 -->
    <iframe src="footer.html" style="width:100%;height:300px" name="iframe_a" border="0" marginwidth="0"
        marginheight="0" scrolling="no" allowtransparency="yes" frameborder="0"></iframe>

    <script src="../js/swiper-bundle.min.js"></script>
    <script src="../js/utils.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/index.js"></script>

</body>

</html>